import axios from "axios";
import { useRef } from "react";
import { useEffect } from "react";
import {useState} from "react";

export default function Main({searchName}) {
  /* 
  初始界面: 请输入关键字搜索    firstView: true  => 点击search发搜索请求变为false
  loading界面: 正在加载中...  loading: false   => 点击search发搜索请求变为true
  请求得到的用户列表界面: 遍历显示用户列表  users: [{用户名, 头像的url, 用户的url}, {}]
  请求失败界面: 错误提示信息   errorMsg: ''
   */
  const [firstView, setFirstView] = useState(true)
  const [loading, setLoading] = useState(false)
  const [users, setUsers] = useState([])
  const [errorMsg, setErrorMsg] = useState('')

  const isMountRef = useRef(true)  // 标识 是否是初始挂载
   /* 
  当接收到新的searchName属性时, 发送获取用户列表显示
  */
  useEffect(() => { // 初始化执行一次 + searchName变化了会执行
    async function getUsers() {
      console.log('---getUsers()')
      // 发请求前, 更新为请求中状态
      setFirstView(false)
      setLoading(true)
      try {
        // 发请求获取数据  不能带: http://localhost:4000
        const response = await axios.get('/search/users', {params: {q: searchName}})
        const result = response.data
        // 请求成功后, 更新为成功状态
        setLoading(false)
        setUsers(result.items) // 指定用户列表
      } catch (error) {
        // 请求失败了, 更新为失败状态
        setLoading(false)
        setErrorMsg('请求失败: ' + error.message)
      }
    }

    // 第一次不要发请求 => searchName是''
    // if (searchName) { // 有值才发
    //   getUsers()
    // }

    // 如果当前是挂载的回调
    if (isMountRef.current) { 
      isMountRef.current = false // 标识后面的执行都是更新, 而不是挂载
      return // 结束, 不发请求
    }
    getUsers()
  }, [searchName])

  // 根据state数据进行多条件渲染
  if (firstView) {
    return <h2>请输入关键字搜索: {searchName}</h2>
  } else if (loading) {
    return <h2>正在加载中...</h2>
  } else if (errorMsg) {
    return <h2>{errorMsg}</h2>
  }

  // useEffect不能在这里执行, 有可能不会执行

  return (
    <div className="row">
      {
        users.map(user => (
          <div className="card" key={user.id}>
            <a href={user.html_url} target="_blank" rel="noreferrer">
              <img
                src={user.avatar_url}
                alt=""
                style={{ width: 100 }}
              />
            </a>
            <p className="card-text">{user.login}</p>
          </div>
        ))
      }
    </div>
  );
}
